<template>
  <van-tabbar
    v-show="showtabbar"
    active-color="#fc8203"
    v-model="active"
    style="z-index: 1999"
  >
    <van-tabbar-item
      v-for="(tab, index) in tabbar"
      :icon="tab.icon"
      :to="tab.path"
      :dot="tab.dot"
      :info="tab.info"
      :key="index"
      >{{ tab.name }}</van-tabbar-item
    >
  </van-tabbar>
</template>


<script>
import { Tabbar, TabbarItem } from 'vant';

export default {
  data() {
    return {
      active: 0,
      showtabbar: true,
      tabbar: [
        {
          name: '涂装资讯', //before: [{name: '首页'}]
          path: '/',
          pathName: 'home',
          icon: 'wap-home',
          dot: false,
          info: '',
        },
        {
          name: '工具设备',
          path: '/mall',
          pathName: 'home-mall',
          icon: 'shopping-cart',
          dot: false,
          info: '',
        },
        // {
        //   name: '发现',
        //   path: '/material/material/1',
        //   pathName: 'discovery',
        //   icon: 'discover',
        //   dot: false,
        //   info: '',
        // },
        {
          name: '城市门店', //before: [{name: '网点'},{name: '门店服务'}]
          path: '/merchant/merchant-list',
          pathName: 'merchant-list',
          icon: 'shop-collect',
          dot: false,
          info: '',
        },
        {
          name: '个人中心', //before: [{name: '我的'}]
          path: '/user/business/card',
          pathName: 'user-business-card',
          icon: 'manager',
          dot: false,
          info: '',
        },
      ],
    };
  },

  watch: {
    $route: 'changeActive',
    getStoreItem() {
      this.showtabbar = this.$store.getters.getterShowTab;
    },
  },

  computed: {
    getStoreItem() {
      this.showtabbar = this.$store.getters.getterShowTab;
    },
  },

  created() {
    const toName = this.$route.name;
    this.setActive(toName);
  },

  methods: {
    changeActive({ name }) {
      this.setActive(name);
    },
    setActive(name) {
      this.tabbar.forEach((tab, i) => {
        if (tab.pathName == name) {
          this.active = i;
          return false;
        }
      });
    },
  },

  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
};
</script>
<style lang="scss" scoped>
/deep/.van-tabbar-item__icon .van-icon {
  font-size: 22px;
}
/deep/.van-tabbar-item {
  border-top: 1px solid #dcdcdc;
  color: #d1cdcc;
}
</style>
